基本图形绘制

最后更新时间:2019年7月5日

基本图形包括点、线、多边形、圆、文本、图像等,实现的原理类似:构造完覆盖物图形对象后进行绘制。

1 点图形 Sample详情

(1)单点

首先构建单点覆盖物图形对象。

//点坐标
MGSDot dot=MGSDotMake(12725830, 3588463);
//创建点图形对象
MGSGraphicPoint *point=[[MGSGraphicPoint alloc] initWithPoint:dot andSize:10];
//设置点颜色
[point setColor:[UIColor redColor]];

单点图形覆盖物对象构造完成后,就需要将其添加到覆盖物图层中进行渲染绘制,后续多种覆盖物图形的绘制同样需要经过此操作。

//方法一:将点图形添加到地图容器缺省的覆盖物图层中
[_mapView.graphicsOverlay addGraphic:point];

//方法二:新建覆盖物图层,添加到覆盖物图层列表中
MGSGraphicsOverlay *mGraphicsOverlay=[[MGSGraphicsOverlay alloc] init];
//添加到地图视图的覆盖物图层列表中
[[_mapView graphicsOverlays] addGraphicOverlay:mGraphicsOverlay];
//添加覆盖物到自定义覆盖物图层中
[mGraphicsOverlay addGraphic:point];

//必须刷新地图容器才能看到绘制效果
[_mapView refresh];

单点图形.jpg

(2)多点

多点是将多个点图形作为一个对象处理的,它们是一个整体,具有相同的颜色,一样的大小。

//点坐标(地图坐标)
MGSDot dot1=MGSDotMake(12697530, 3593327);
MGSDot dot2=MGSDotMake(12736224, 3570660);
MGSDot dot3=MGSDotMake(12766215, 3612566);
//实例化多点图形对象
MGSGraphicMultiPoint *graphicMultiPoint=[[MGSGraphicMultiPoint alloc] init];
[graphicMultiPoint appendPoint:dot1];             //添加坐标点
[graphicMultiPoint appendPoint:dot2];             
[graphicMultiPoint appendPoint:dot3];             
[graphicMultiPoint setPointSize:10];              //设置点大小
[graphicMultiPoint setColor:[UIColor redColor]];  //设置颜色

多点图形.jpg

2 线 Sample详情

(1)实线

//点坐标(地图坐标)
MGSDot dot1=MGSDotMake(12697530, 3593327);
MGSDot dot2=MGSDotMake(12736224, 3570660);
MGSDot dot3=MGSDotMake(12766215, 3612566);
//创建线图形对象
MGSGraphicPolylin *graphicPolylin=[[MGSGraphicPolylin alloc] init];
[graphicPolylin appendPoint:dot1];             //添加坐标点
[graphicPolylin appendPoint:dot2];
[graphicPolylin appendPoint:dot3];
[graphicPolylin setLineWidth:5];               //设置线宽
[graphicPolylin setColor:[UIColor redColor]];  //设置颜色
//将线图形添加到覆盖物图层中,并刷新地图
[_mapView.graphicsOverlay addGraphic:graphicPolylin];
[_mapView refresh];

实线图形.jpg

(2)虚线

虚线绘制目前只提供线段形式的。

//创建虚线图形对象
MGSGraphicStippleLine *stippleLine=[[MGSGraphicStippleLine alloc] init];
[stippleLine setStartPoint:firstPoint];      //设置起点
[stippleLine setEndPoint:endPoint];          //设置终点
[stippleLine setLineWidth:8];                //设置线宽
[stippleLine setColor:[UIColor blueColor]];  //设置颜色

虚线.jpg

(3)纹理线

//创建线图形对象
MGSGraphicPolylin *textureLine=[[MGSGraphicPolylin alloc] init];
[textureLine appendPoint:point1];            //添加点
[textureLine appendPoint:point2];
[textureLine appendPoint:point3];
[textureLine setColor:[UIColor blueColor]];  //设置线颜色
[textureLine setLineWidth:8];                //设置线宽
[textureLine setFillTextureImage:[UIImage imageNamed:@"ico_texture_line.png"]];  //设置线的填充纹理图片,要求纹理的宽、高为2的幂

纹理线.jpg

3 多边形 Sample详情

多边形即区图形,分为普通区图形(单圈区图形)和带洞区(多圈区图形)。

(1)单圈区

//点坐标
MGSDot dot1=MGSDotMake(12742678.48,3620270.51);
MGSDot dot2=MGSDotMake(12754184.19,3595188.06);
MGSDot dot3=MGSDotMake(12774664.36,3611065.94);
//创建多边形图形对象
MGSGraphicPolygon *graphicPolygonA=[[MGSGraphicPolygon alloc] init];
//添加坐标点(必须闭合:首尾点相同)
[graphicPolygonA appendPoint:dot1];
[graphicPolygonA appendPoint:dot2];
[graphicPolygonA appendPoint:dot3];
[graphicPolygonA appendPoint:dot1];
[graphicPolygonA setColor:[UIColor colorWithRed:100.0/255.0 green:149.0/255.0 blue:237.0/255.0 alpha:160.0/255.0]];   //设置填充颜色
[graphicPolygonA setBorderlineWidth:8]; //设置边线宽
[graphicPolygonA setBorderlineColor:[UIColor colorWithRed:255.0/255.0 green:165.0/255.0 blue:0.0/255.0 alpha:255.0/255.0]];  //设置边线颜色

重要说明:在为多边形对象赋予坐标信息时,必须首尾点相同,形成闭合区,才能显示正确。

单圈区图形.jpg

(2)多圈区

以两圈点序列的区图形为例:

//外圈对应dot点
MGSDot dot11=MGSDotMake(12709058.79, 3592776.46);
MGSDot dot12=MGSDotMake(12728259.52, 3594065.10);
MGSDot dot13=MGSDotMake(12744238.65, 3583498.26);
MGSDot dot14=MGSDotMake(12731867.71, 3558369.78);
MGSDot dot15=MGSDotMake(12703904.23, 3571385.05);
//内圈对应dot点
MGSDot dot21=MGSDotMake(12719239.04,3584915.76);
MGSDot dot22=MGSDotMake(12728646.11,3580792.12);
MGSDot dot23=MGSDotMake(12721687.46,3573446.87);
//创建多边形图形对象
MGSGraphicPolygon *graphicPolygonB=[[MGSGraphicPolygon alloc] init];
//构建坐标序列
MGSDot dotsB[10]={dot11,dot12,dot13,dot14,dot15,dot11,dot21,dot22,dot23,dot21};
//构造圈序列
NSNumber *number1=[[NSNumber alloc] initWithInt:6];
NSNumber *number2=[[NSNumber alloc] initWithInt:4];
NSArray<NSNumber *> *circlesArray=[[NSArray alloc] initWithObjects:number1,number2, nil];
//设置
[graphicPolygonB setPoint:dotsB andCircles:circlesArray];
[graphicPolygonB setColor:[UIColor colorWithRed:100.0/255.0 green:149.0/255.0 blue:237.0/255.0 alpha:160.0/255.0]];    //设置填充颜色
[graphicPolygonB setBorderlineWidth:8];  //设置边线宽
[graphicPolygonB setBorderlineColor:[UIColor colorWithRed:255.0/255.0 green:165.0/255.0 blue:0.0/255.0 alpha:255.0/255.0]];  //设置边线颜色

多圈区图形.jpg

4 圆 Sample详情

//创建圆图形对象(并设置圆形和半径)
MGSGraphicCircle *graphicCircle=[[MGSGraphicCircle alloc] initWithCenterPoint:dot andRadius:10000];
[graphicCircle setColor:[UIColor colorWithRed:30.0/255.0 green:144.0/255.0 blue:255.0/255.0 alpha:180.0/255.0]];  //设置填充颜色
[graphicCircle setBorderlineColor:[UIColor colorWithRed:255.0/255.0 green:165.0/255.0 blue:0.0/255.0 alpha:255.0/255.0]];  //设置边界线颜色
[graphicCircle setBorderlineWidth:8];   //设置边界线宽

圆图形.jpg

5 文本 Sample详情

//地图坐标点
MGSDot dot=MGSDotMake(12735778, 3563454);
//视图坐标点
CGPoint myAnchorPoint=CGPointMake(0.5f, 0.5f);
//创建文本对象(并设置位置、文字、锚点、文字大小、是否随图倾斜)
MGSGraphicText *graphicText=[[MGSGraphicText alloc] initWithPoint:dot text:@"中地数码" anchorPoint:myAnchorPoint fontSize:25 slopeFlag:YES];
[graphicText setColor:[UIColor redColor]]; //设置颜色

说明:锚点:文本相对于dot点的位置,坐标(0,0)对应(X,Y),坐标为(0,0)时,文本的左下角和dot重合;锚点为(1,1)时,文本的右上角和dot重合。

文本图形.jpg

6 图像 Sample详情

//地图坐标点、图像、视图坐标点
MGSDot dot=MGSDotMake(12737610.18, 3581849.49);
UIImage *image=[UIImage imageNamed:@"trainstation"];
CGPoint myAnchorPoint=CGPointMake(0.5f, 0.5f);
//创建图像对象(参数:图像位置点、图像、锚点:和MGSGraphicText中的锚点作用一样、是否随图倾斜)
MGSGraphicImage *graphicImage=[[MGSGraphicImage alloc] initWithPoint:dot image:image anchorPoint:myAnchorPoint slopeFlag:YES];

图像.jpg"